<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <style>
        label.required:after { /* 给红色的必填项打红色星号（文字后）如果打前面用before*/
            content: ' *';
            color: red;
        }

        .layui-form-label {
            width: 100px;
            height: 50px;
            line-height: 45px;
            padding: 0px;
        }

        .layui-form .layui-input-inline {
            margin-left: 30px;
            width: 290px;
        }

        .layui-laydate {
            font-size: 16px;
        }

        .layui-laydate-footer span {
            font-size: 15px;
            height: 30px;
            line-height: 30px;
        }

        .laydate-footer-btns {
            position: absolute;
            right: 10px;
            top: 7px;
        }

        .main-container .layui-form-item {
            margin: 15px 0px !important;
        }

        .layui-input {
            height: 50px;
        }

        .submit-btn-container .layui-btn, .pear-btn {
            height: 45px;
            width: 130px;
            font-size: 20px;
        }

        .pear-btn i {
            font-size: 20px;
        }

        .layui-form-select dl, .dtree-select {
            position: absolute;
            left: 0;
            top: 51px;
        }

        .layui-form-selectup dl {
            top: auto;
            bottom: 51px;
        }

        .layui-select-disabled .layui-disabled {
            color: black !important;
        }

        .layui-laydate1 {
            top: 208px;
        }

    </style>
</head>
<body>
<div class="main-container">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" style="font-size: 16px;">
        <form class="layui-form" action="" onsubmit="return false" style="margin-bottom: 40px;">
            <div class="layui-form-item" style="display: none;">
                <div class="layui-input-block">
                    <input type="text" name="id" th:value="${archives.getId()}"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">档案id</label>
                <div class="layui-input-block">
                    <input type="text" name="fileId" placeholder="请输入档案id" th:value="${archives.getFileId()}"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">档案名</label>
                <div class="layui-input-block">
                    <input type="text" name="fileName" required lay-verify="required" id="fileNameInput"
                           th:value="${archives.getFileName()}"
                           lay-reqtext="请输入档案名" placeholder="请输入档案名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">档案分类</label>
                <div class="layui-input-block">
                    <input type="number" id="typeId" name="typeId" lay-verify="required"
                           lay-reqtext="请选择档案分类" th:value="${archives.getArchivesTypeId()}"
                           style="display:none;width: 0px" autocomplete="off" class="layui-input">
                    <ul id="typeTree" class="dtree" data-id="0" th:data-value="${archives.getArchivesTypeId()}"></ul>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年度</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" autocomplete="off" name="year"
                           th:value="${archives.getYear()}"
                           id="ArchiveDate" placeholder="请选择年度">
                    <div style="margin-top: 2px;color: darkgoldenrod;font-size: 12px;">未选择年度默认档案年度</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">责任人</label>
                <div class="layui-input-block">
                    <select name="userName" lay-search lay-verify="required" lay-reqtext="责任人为必填项">
                        <option value="">请选择责任人</option>
                        <option th:each="user,stat:${userList}" th:value="${user.userName}"
                                th:text="${user.userName}"
                                th:selected="${archives.getUserName()} eq ${user.userName}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">档案简介</label>
                <div class="layui-input-block">
                    <input type="text" name="profile" placeholder="请输入档案简介" th:value="${archives.getProfile()}"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">档案状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="fileStatus" value="0" title="在库"
                           th:checked="${archives.getStatus() eq 0}">
                    <input type="radio" name="fileStatus" value="1" title="出库"
                           th:checked="${archives.getStatus() eq 1}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">区域位置</label>
                <div class="layui-input-block">
                    <input type="number" id="archiveArea" name="archiveArea" lay-verify="required"
                           lay-reqtext="请选择区域位置" th:value="${archives.getArchivesAreaId()}"
                           style="display:none;width: 0px" autocomplete="off" class="layui-input">
                    <ul id="areaTree" class="dtree" data-id="0" th:data-value="${archives.getArchivesAreaId()}"></ul>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">载体名称</label>
                <div class="layui-input-block">
                    <select name="hostId" lay-filter="carrierSelect" id="carrierSelect" lay-verify="required"
                            lay-reqtext="请选择载体设备" lay-search>
                        <option value="">请选择载体设备</option>
                        <option th:each="host,stat:${hostList}" th:value="${host.getId()}"
                                th:text="${'载体名称:'+host.getCabinetName() +'  区号:'+host.getCabinetNumber()}"
                                th:selected="${archives.getAreaCode()} eq ${host.getCabinetNumber()}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">列号</label>
                <div class="layui-input-block">
                    <select name="columnNumber" lay-filter="columnNumber" id="columnNumber" lay-verify="required"
                            lay-reqtext="请选择列号" lay-search>
                        <option value="">请选择列号</option>
                        <option th:each="column,stat:${columnList}" th:value="${column}"
                                th:text="${column}" th:selected="${archives.getColumnNumber()} eq ${column}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">密集架区</label>
                <div class="layui-input-block">
                    <select name="denseRackRegion" lay-filter="denseRackRegion" id="denseRackRegion"
                            lay-verify="required"
                            lay-reqtext="请选择密集架区" lay-search>
                        <option value="">请选择密集架区</option>
                        <option value="0" th:selected="${archives.getDenseRackRegion() eq 0}">左区</option>
                        <option value="1" th:selected="${archives.getDenseRackRegion() eq 1}">右区</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">节数</label>
                <div class="layui-input-block">
                    <select name="joint" lay-filter="joint" id="joint" lay-verify="required"
                            lay-reqtext="请选择节数" lay-search>
                        <option value="">请选择节数</option>
                        <option th:each="joint,stat:${joinList}" th:value="${joint}"
                                th:text="${joint}" th:selected="${archives.getJoint() eq joint}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" th:if="${sysType != '2'}">
                <label class="layui-form-label required">层数</label>
                <div class="layui-input-block">
                    <select name="cabinetLayer" lay-filter="cabinetLayer" id="cabinetLayer" lay-verify="required"
                            lay-reqtext="请选择层数" lay-search>
                        <option value="">请选择层数</option>
                        <option th:each="layer,stat:${layerList}" th:value="${layer}"
                                th:text="${layer}" th:selected="${archives.getLayerNumber() eq layer}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">位置</label>
                <div class="layui-input-block">
                    <select name="position" lay-filter="position" id="position" lay-verify="required"
                            lay-reqtext="请选择位置" lay-search>
                        <option value="">请选择位置</option>
                        <option th:each="position,stat:${positionList}" th:value="${position}"
                                th:text="${position}" th:selected="${archives.getPosition() eq position}"></option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <div style="width: 100%;height: 1px;background: #E9E9E9;"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="height: 38px;line-height: 38px;">二维码</label>
                <div class="layui-input-block">
                    <button class="pear-btn pear-btn-primary" lay-on="qrCodePrinting" style="height: 38px;
    background-color: #16baaa !important;border: 1px solid #16baaa !important;width: 110px;">打印
                    </button>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-form-item submit-btn-container">
                    <div class="layui-input-block"
                         style="display: flex;flex-direction: row;justify-content: center;">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="archivesSave">
                            <i class="layui-icon layui-icon-file-b"></i>
                            保存
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary" style="margin-left: 25px">重置
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script th:inline="javascript">
    var uuid = [[${archives.getUuid()}]];
    console.log(uuid)

    var electronId = null;
    layui.use(['form', 'jquery', 'laydate', 'loading', 'dtree'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let laydate = layui.laydate;
        var util = layui.util;
        let dtree = layui.dtree;
        var upload = layui.upload;
        var loading = layui.loading;
        let areaId = null;


        //打印
        util.on('lay-on', {
            //打印
            'qrCodePrinting': function () {
                let fileNameInput = $("#fileNameInput").val();
                if (fileNameInput != "") {
                    // 页面层
                    layer.open({
                        title: '二维码生成',
                        type: 2,
                        area: ['1px', '1px'], // 极小化弹窗
                        content: '/archives/print/qrCode?fileName=' + fileNameInput + '&uuid=' + uuid,
                        success: function (layero, index) {
                            // 可以隐藏弹窗标题栏
                            layero.find('.layui-layer-title').hide();
                        }
                    });
                }
            },
        })
        // dtree插件下拉框点击空白处隐藏
        $(document).bind("click", function (e) {
            var e = e || window.event;    //事件对象，兼容IE
            var target = e.target || e.srcElement;  //源对象，兼容火狐和IE
            if ($(target).prop("class").indexOf("layui-card") == -1) {
                $(".dtree-select-show").removeClass("dtree-select-show");
            }
        })
        // 选择载体名称
        form.on('select(carrierSelect)', function (data) {
            var value = data.value;
            if (value === "") {
                return false;
            }
            $.ajax({
                url: '/host/get/info?hostId=' + value,
                dataType: 'json',
                type: 'get',
                success: function (result) {
                    if (result.code === 200) {
                        let hostInfo = result.data;
                        // 列号
                        let columnNumberHtml = "<option value=''>请选择列号</option>";
                        for (let column = 1; column <= hostInfo.columnNumber; column++) {
                            columnNumberHtml += "<option value='" + column + "'>" + column + "</option>";
                        }
                        $("#columnNumber").html(columnNumberHtml);

                        // 节数
                        let cabinetJointHtml = "<option value=''>请选择节数</option>";
                        for (let joint = 1; joint <= hostInfo.cabinetJoint; joint++) {
                            cabinetJointHtml += "<option value='" + joint + "'>" + joint + "</option>";
                        }
                        $("#joint").html(cabinetJointHtml);

                        // 层数
                        let cabinetLayerHtml = "<option value=''>请选择层数</option>";
                        for (let layer = 1; layer <= hostInfo.cabinetLayer; layer++) {
                            cabinetLayerHtml += "<option value='" + layer + "'>" + layer + "</option>";
                        }
                        $("#cabinetLayer").html(cabinetLayerHtml);

                        // 位置
                        let positionHtml = "<option value=''>请选择位置</option>";
                        for (let rfid = 1; rfid <= hostInfo.rfidNumber; rfid++) {
                            positionHtml += "<option value='" + rfid + "'>" + rfid + "</option>";
                        }
                        $("#position").html(positionHtml);

                        form.render("select");
                    }
                }
            });
        })
        // 初始化区域树
        dtree.render({
            elem: "#areaTree",
            initLevel: "1",//默认展开层级为1
            width: "100%",
            method: 'get',
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            // response:{message:"msg",statusCode:200},  //修改response中返回数据的定义
            url: "/archives/area/buildAreaTree/table",
            dataFormat: "list",  //配置data的风格为list
            select: true, //指定下拉树模式
            selectTips: "请选择区域位置",
            selectCardHeight: "230"
        });
        dtree.on("node('areaTree')", function (obj) {
            var param = dtree.getNowParam("areaTree");
            $("#archiveArea").val(param.nodeId);
            areaId = param.nodeId;
            // let carrierSelect = null;
            // $.ajax({
            //     url: "/host/get/list?areaId=" + param.nodeId,
            //     type: "get",
            //     dataType: "json",
            //     success: function (result) {
            //         carrierSelect = result.data;
            //         let carrierSelectHtml = "<select name='hostId' lay-verify='required' lay-reqtext='请选择载体设备' lay-search>";
            //         carrierSelectHtml += "<option value=''>请选择载体设备</option>";
            //         for (let i = 0; i < carrierSelect.length; i++) {
            //             let item = carrierSelect[i];
            //             carrierSelectHtml += "<option value='" + item.id + "'>载体名称:" + item.cabinetName + " 区号:" + item.cabinetNumber + "</option>";
            //         }
            //         carrierSelectHtml += "</select>";
            //         $("#carrierSelect").html(carrierSelectHtml);
            //         form.render("select");
            //     }
            // });
        });
        //初始化分类树
        dtree.render({
            elem: "#typeTree",
            initLevel: "1",//默认展开层级为1
            width: "100%",
            method: 'get',
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            // response:{message:"msg",statusCode:200},  //修改response中返回数据的定义
            url: "/archives/type/buildTypeTree/table",
            dataFormat: "list",  //配置data的风格为list
            select: true, //指定下拉树模式
            selectTips: "请选择档案分类",
            // selectCardHeight: "150"
        });
        dtree.on("node('typeTree')", function (obj) {
            var param = dtree.getNowParam("typeTree");
            $("#typeId").val(param.nodeId);
        });

        laydate.render({
            elem: '#ArchiveDate', //指定元素
            theme: '#393D49',
            type: 'year',
        });

        // 提交事件
        form.on('submit(archivesSave)', function (data) {
            let loading = layer.load();
            data.field.electronId = electronId;
            $.ajax({
                url: '/archives/edit/save',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                type: 'post',
                success: function (result) {
                    layer.close(loading);
                    if (result.code === 200) {
                        layer.msg(result.message, {icon: 1, time: 1800}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                        });
                    } else {
                        layer.msg(result.message, {icon: 2, time: 1800});
                    }
                }
            })
            return false;
        });
    })
</script>
</body>
</html>